<template>
  <div class="container">

    <Category title="游戏">
      <template scope="gameObj1" slot="test1">
        <ul>
          <li v-for="(g,index) in gameObj1.games" :key="index">{{g}}</li>
        </ul>
      </template>
      <h1 slot="test2">哈哈哈哈</h1>
    </Category>

    <Category title="游戏">
      <template scope="gameObj2" slot="test1">
        <ol>
          <li style="color:red" v-for="(g,index) in gameObj2.games" :key="index">{{g}}</li>
        </ol>
        <h2>{{gameObj2.msg}}</h2>
      </template>
    </Category>

    <Category title="游戏">
      <!-- <template slot-scope="{games}"> slot-scope和scope是一样 -->
      <template scope="{games}" slot="test1">
        <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
      </template>
    </Category>

  <!-- 结构赋值 -->
    <Category title="游戏">
      <template scope="{msg:msg1}" slot="test1">
        <!-- <h4 v-for="(g,index) in games" :key="index">{{g}}</h4> -->
        <h4>{{msg1}}</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category'

export default {
    name:'App',
    components:{Category},
}
</script>
<style scoped>
.container{
  display: flex;
  /* 主轴对齐方式 */
  justify-content: space-around; 
}
img{
    width: 100%;
    height: 50%;
}
.foot{
  display: flex;
  /* 主轴对齐方式 */
  justify-content: space-around; 
}
.hh{
  text-align: center;
}
</style>
